<template>
	<div class="template0-room-wrap" :style="{height:height+'px'}">
		<section class="play_area" :style="{height:height+'px'}">
			<div class="video_box mode0-video-box" v-if="roompara.login_alert_time !== 0 || user.logined && !playerLoading">
				<mic-loading  v-if="micLoading"  :index="micIndex"></mic-loading>
				<div id="fullscreen-player-wrap"></div>
			</div>
			<player-loading v-if="playerLoading"></player-loading>
			<div class="nolive" :class="{'is_official':!is_official}" v-if="!roomLive && (roompara.login_alert_time !== 0 || user.logined) && !playerLoading">
				<div class="no-live-innerwrap">
					<img src="@/assets/images/mode1-no-live.png" alt="暂未直播" width="178" height="49" v-if="!is_official">
					<img src="@/assets/images/deticateIp/no-live.png" alt="暂未直播" width="120" height="77" v-else>
					<p>直播尚未开始，请亲们耐心等待...</p>
				</div>
			</div>
			<div class="play_wrap">
				<template0-header></template0-header>
				<template0-chat :xmessager="xmessager" ref="chat" :room-password="searchQuery.room_password"></template0-chat>
				<div class="chat_box_ul" ref="publicwrap">
					<div class="show_area" v-overscroll-bahavior>
						<ul id="content_pub" ref="pubChatWrap" class="mode0-chat-wrap">
						</ul>
					</div>
					<div class="barrage-tip">
						有更多新的消息
					</div>
				</div>
			</div>
		</section>
		<gift></gift>
		<alert-bind-phone v-if="!user.logined" v-show="roompara.login_alert_time === 0 || loginDialog">
			<template #tips>
				<div class="tips-wrap">提示<i class="close-icon" @click="loginDialog = false" v-if="roompara.login_alert_time !== 0"></i></div>
			</template>
			<template #content>
				<div class="content">想观看直播,请先登录！</div>
			</template>
			<template  #footbtn><div class="alert-bind-btn"><router-link to="/login" style="display: block;height: 100%;">登录</router-link></div></template>
		</alert-bind-phone>
		<SendGift :class="{'active': giftShow}" :gift-arr="giftArr"  @close-gift="giftShow = false" :init-data="initData"/>
	</div>
</template>
<script>
	import roomDetailMixin from '@/mixins/roomDetailMixin'
	import template0Header from './components/header'
	import template0Chat from './components/template0_chat'
	import PlayerLoading from '@/components/playerLoading'
	import {mapGetters} from 'vuex'
	import micLoading from '@/components/Loading/index'
	import {MSG_MESSAGE} from '@/utils/xchatMessageHandle'
	import {isAndroid,autoScroll} from '@/utils'
	import SendGift from '@/components/SendGift'
	export default {
		name: 'roomTemplate0',
		components:{
			template0Header,
			template0Chat,
			micLoading,
			PlayerLoading,
			SendGift
		},
		mixins: [roomDetailMixin],
		data() {
			return {
				mode:0,
				setHeight:false,
				playerLoading:false,
				currentIndex: 0,
				is_official: typeof(window.is_official) !== 'undefined' ? window.is_official : false,
			}
		},
		methods:{
			messageHandler(chatdata, manual = true){
				if(chatdata.type === 'C' && (this.xmessager.uid === chatdata.data.from_uid) && manual){
					return false
				}
				if(chatdata.type === 'G' && 'gift_thumb_img_v3' in chatdata.data) {
					chatdata.data.gift_thumb_img_v3 = `${this.roompara.show_url}${chatdata.data.gift_thumb_img_v3}`
				}
				MSG_MESSAGE(chatdata,{chatDisplay:this.chatDisplay,roompara:this.roompara,xmessager:this.xmessager,store:this.$store,chat:this.chat,header:this.$refs.chat})
				if(chatdata.data.secret){
					//私聊组件滚动到底部
					this.$refs.chat.$nextTick(()=>{
						this.$refs.chat.privateChatScroll(this.$refs.chat.$refs.privateinnerwrap)
					})
				}else{
					this.$nextTick(()=>{
						autoScroll(this.$refs.publicwrap)
					})
				}
			},
			generateChatdata({message, secret, msg_id, to_uid}){
				const chatdata = {}
				chatdata.type = 'C'
				chatdata.data = {
					from_uid: this.xmessager.uid,
					frid: this.xmessager.room_id,
					from_room_id: this.xmessager.room_id,
					message,
					from_nickname: '我',
					from_level: this.xmessager.level,
					levelinroom: this.xmessager.level,
					secret,
					title: this.xmessager.appdata.title,
					msg_id,
					to_uid
				}
				return chatdata
			},
			shangmaiHandler({url_data,mictime}){
				this.initPlayer(url_data,false,true,0,5000).then((player)=>{
					this.fullScreenPlayer = player
					this.fullScreenPlayer.mictime = mictime
					this.playerEvents()
				})
			},
			xiamaiHandler(){
				if(this.fullScreenPlayer){
					this.destroyPlayer()
					this.offPlayerEvents()
					this.fullScreenPlayer = null
				}
			},
			chatEvents(){
				this.chat.on(this.chat.chatEvents.MSG_MESSAGE,this.messageHandler)
				this.chat.on(this.chat.chatEvents.SHANGMAI,this.shangmaiHandler)
				this.chat.on(this.chat.chatEvents.XIAMAI,this.xiamaiHandler)
			},
			offChatEvents(){
				this.chat.off(this.chat.chatEvents.MSG_MESSAGE,this.messageHandler)
				this.chat.off(this.chat.chatEvents.SHANGMAI,this.shangmaiHandler)
				this.chat.off(this.chat.chatEvents.XIAMAI,this.xiamaiHandler)
			},
			nativePlayerPlayHandler(){
				if(isAndroid){
					setTimeout(()=>{
						if(!this.setHeight){
							this.height = window.innerHeight
							this.setHeight = true
						}
					},500)
				}
			},
			flvErrorHandler(){
				this.setHeight = false
				this.fullScreenPlayer.destroy()
				this.offPlayerEvents()
				this.fullScreenPlayer = this.initPlayer(this.watchServer,true,false)
				this.openHls = true
				this.playerEvents()
			},
			playerEvents(){
				this.fullScreenPlayer.on(this.fullScreenPlayer.playerEvents.NATIVE_PLAYER_PLAY,this.nativePlayerPlayHandler)
				this.fullScreenPlayer.on(this.fullScreenPlayer.playerEvents.FLV_ERROR,this.flvErrorHandler)
			},
			offPlayerEvents(){
				this.fullScreenPlayer.off(this.fullScreenPlayer.playerEvents.NATIVE_PLAYER_PLAY,this.nativePlayerPlayHandler)
				this.fullScreenPlayer.off(this.fullScreenPlayer.playerEvents.FLV_ERROR,this.flvErrorHandler)
			},
			judgeOnorientation(){
				let width = document.documentElement.clientWidth,height =  document.documentElement.clientHeight
				if (width >= height) {
					document.documentElement.classList.remove('portrait')
					document.documentElement.classList.add('landscape')
				}else{
					document.documentElement.classList.remove('landscape')
					document.documentElement.classList.add('portrait')
				}
			},
			handleOrientationchange(){
				setTimeout(()=>{
					this.height = window.innerHeight
					this.judgeOnorientation()
				},200)
			},
			visibilityChangeHandler(){
				if (document.hidden || document.visibilityState === 'hidden') {
					if(this.fullScreenPlayer){
						this.currentIndex = this.fullScreenPlayer.currentHlsIndex
						this.fullScreenPlayer.destroy()
						this.offPlayerEvents()
						this.fullScreenPlayer = null
					}
				}else{
					if(this.watchServer.length){
						this.fullScreenPlayer = this.initPlayer(this.watchServer, this.openHls, false, this.currentIndex)
						this.playerEvents()
					}
				}
			}
		},
		mounted(){
			document.addEventListener('visibilitychange', this.visibilityChangeHandler)
			window.addEventListener('orientationchange',this.handleOrientationchange)
			this.judgeOnorientation()
		},
		beforeDestroy(){
			document.removeEventListener('visibilitychange', this.visibilityChangeHandler)
			if(this.fullScreenPlayer){
				this.fullScreenPlayer.destroy()
				this.offPlayerEvents()
			}
			if(this.chat){
				this.offChatEvents()
			}
			this.fullScreenPlayer = null
			this.chat = null
			clearInterval(this.loginTimer)
			this.loginTimer = null
			window.removeEventListener('orientationchange',this.handleOrientationchange)
		}
	}
</script>
<style lang="scss" scoped>
	.barrage-tip{
		position: absolute;
		left: 50%;
		bottom: 2rem;
		padding: 0.3125rem 0.625rem;
		background-color: #4360F0;
		border-radius: 0.3125rem;
		transform: translateX(-50%);
		color: #fff;
		box-shadow:  0 0 5px rgba(0, 0, 0, .8);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s, visibility .25s;
	}
	.barrage-tip.show{
		opacity: 1;
		visibility: visible;
	}
	.play_area {
		position: relative;
		width: 100%;
		background-color: $room_default_bgcolor;
		background-size: cover;
		overflow-y: hidden;
	}

	.play_wrap,
	.video_wrap {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: absolute
	}

	.play_area .video_box,
	.play_area .play_wrap {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.template0-room-wrap{overflow: hidden;}
	.template0-room-wrap *{box-sizing: border-box;}
	.play_wrap .chat_box_ul{position:absolute;height: 12rem;height:calc(100vh - (10rem + 100vw * 9 / 16 + .8rem + 5rem));top:calc(10rem + 100vw * 9 / 16 + .8rem);left:16px;right: 16px;z-index:1;overflow:hidden;}
	.show_area{height: 100%;overflow-y: auto;-webkit-overflow-scrolling: touch;}
	.nolive{position:absolute;left:0;top:50%;color:#fff;text-align:center;font-size:14px;width:100%;}
	.nolive p{margin-top: 8px;text-align: center;}
	.is_official.nolive p{margin-top: 0;}
	.template0-room-wrap >>> .loading{top: 50% !important;}
</style>
<style>
	.play_wrap .chat_box_ul .show_area li{list-style:none;border-radius:5px;box-sizing:border-box;font-size:14px;line-height:22px;color:#FFF;}
	.play_wrap .chat_box_ul .chat_user,.time{color:#efba35;word-break:break-all}
	.play_wrap .chat_box_ul .chat_area{word-break:break-all;margin-left:5px}
	.play_wrap .chat_box_ul .chat_area img{vertical-align: middle;}
	.play_wrap .chat-red{color:#FF3955 ;}
	.mode0-video-box.video_box  .fullscreen-play-btn{top:10rem;margin-top: 0 ;}
	.mode0-video-box.video_box  .choose-line-wrap{top: 5.37rem;}
	.mode0-video-box.video_box  .video-js{object-position: center 10rem;}
	.mode0-video-box.video_box  .flv-error-tips,.mode0-video-box.video_box  .fullscreen-line-load, .mode0-video-box.video_box  .fullscreen-video-load{top:16rem;}
	.landscape .template0-room-wrap .loading-inner-wrap{top:50%;transform: translateX(-50%) translateY(-50%);}
	.portrait .template0-room-wrap .loading-inner-wrap{top:13rem;}
	.template0-room-wrap .notice-wrap{top:15rem;}
	.template0-room-wrap .fullscreen-player-wrap[data-orientation='landscape'] + .notice-wrap{top: 50%;}
	.portrait .flv-container-wrap .template0-room-wrap .mode0-video-box.video_box .video-js{
		object-position: center 6rem;
	}
	.portrait .flv-container-wrap .template0-room-wrap .mode0-video-box.video_box .fullscreen-video-load{
		top: 12rem;
	}
	.portrait .flv-container-wrap .template0-room-wrap .mode0-video-box.video_box .fullscreen-play-btn{
		top: 6rem;
	}
	.portrait .flv-container-wrap .template0-room-wrap .play_wrap .chat_box_ul{
		height: calc(100vh - (6rem + 100vw * 9 / 16 + .8rem + 5rem));
		top: calc(6rem + 100vw * 9 / 16 + .8rem);
	}
	.fullscreen-player-wrap-mode0 canvas{width: 100%;height: calc(100vw * 9 / 16);}
	.flvplayer-player{position: absolute;top: 6rem;}
</style>
<style lang='scss' scoped>
	.mode0-chat-wrap{
		.warning{
			color: #ED4259;
		}
	}
	.play_wrap{
		.room-detail-header{
			padding: 25px 20px;
			background-color: transparent;
			.room-detail-header-left{
				padding:0 5px;
				border-radius:10px;
				background-color:rgba(255,255,255,.15)
			}
		}
	}
	.landscape{
		.nolive{
			position:fixed;
			top:0;
			bottom:0;
			left:0;
			right:0;
			background-color: #3A454E;
			z-index: 9999;
			.no-live-innerwrap{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
			}
		}
	}
	.portrait{
		.nolive{
			top: 12rem;
		}
		.loading{
			top:12rem;
			margin-top: 0;
		}
	}
</style>